<template>
    <div class="donationOK" style="height:540px;background:white;">
        <div class="u25">
            <div class="text">
                <p>
                    <span class="span1">恭喜你，提交成功！</span>
                    <span class="span2">请把您的物品寄到以下地址：</span>
                </p>
            </div>
        </div>
        <div class="u27">
            <div style="top: 25px;transform-origin: 257.5px 0px 0px;">
                <p class="add">{{address}}</p>
            </div>
        </div>
        <div class="bottom_1">
            <p style="font-size: 18px;text-align: center">
                <span class="span3">（捐赠成功后将有受助者寄给你的&nbsp;“爱心卡/回馈信”，请留意查收哦~）&nbsp;</span>
                <router-link to="/idea"><span class="span4" id="selectInfo">查看物流信息</span></router-link>
            </p>
        </div>
    </div>
</template>
<script scoped>
    export default {
        data() {
            return {
                address: '广东省广州从化市 广从南路548号 广州大学华软软件学院'
            }
        },
        mounted() {
            //查看物流按钮鼠标移动时的变化
            var selectInfo = document.getElementById('selectInfo');
            selectInfo.onmouseover = function () {
                selectInfo.style.color = '#6d8ef9';
            };
            selectInfo.onmouseout = function () {
                selectInfo.style.color = '#00D9D9';
            };
        }
    }
</script>
<style scoped>
    .u25 {
        width: 420px;
        height: 80px;
        background: url("../assets/images/提交成功，请将物品寄往该地址，我们将会为您转寄到受助者中/changePasswordOK_u25.png") no-repeat top center;
        margin: 0 auto;
        top: 130px;
        position: relative;
    }

    .text {
        height: 24px;
        width: 416px;
        margin: 0 auto;
        top: 28px;
        position: relative;
    }

    .span1 {
        font-family: '微软雅黑 Light', '微软雅黑';
        font-weight: 290;
        color: #7A7A7A;
        font-size: 18px;
    }

    .span2 {
        font-family: '微软雅黑 Regular', '微软雅黑';
        font-weight: 400;
        color: #F9007C;
        font-size: 18px;
    }

    .u27 {
        width: 519px;
        height: 50px;
        background: rgb(235, 235, 235) no-repeat top center;
        margin: 0 auto;
        top: 160px;
        position: relative;
    }

    .add {
        color: rgba(0, 0, 0, 0.8);
        font-size: 16px;
        font-weight: bold;
        font-family: '微软雅黑 Regular', '微软雅黑';
        text-align: center;
        padding-top: 15px;
    }

    .bottom_1 {
        margin: 0 auto;
        top: 330px;
        position: relative;
    }

    .span3 {
        font-family: '微软雅黑 Regular', '微软雅黑';
        font-size: 18px;
        text-align: center;
        color: #A1A1A1;
    }

    .span4 {
        font-family: '微软雅黑 Regular', '微软雅黑';
        font-size: 16px;
        text-align: center;
        text-decoration: underline;
        color: #00D9D9;
    }
</style>